<template>
  <div class="collectionList">
    <header class="collectionList-head">
      <i
        class="iconfont icon-fanhui"
        style="font-size: 20px"
        @click="$router.go(-1)"
      ></i>
      <p style="color: #5e5e5e">我的收藏</p>
      <span style="color: #5e5e5e">编辑</span>
    </header>
    <div class="collectionList-main">
      <div class="goods-list">
        <div
          class="goods-item"
          v-for="(goods, i) in collectionGoodsList"
          :key="i"
        >
          <div class="goods-item-wap" @click="GoodSdetails(goods)">
            <img :src="goods.topImages[0]" alt="" />
          </div>
          <!-- 商品描述区域 -->
          <div class="goods-info">
            <p class="title">{{ goods.itemInfo.title }}</p>
            <div class="footer">
              <span class="price">￥{{ goods.itemInfo.highPrice }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("m_cart", ["collectionGoodsList"]),
  },
};
</script>

<style lang="scss" scoped>
.collectionList-head {
  display: flex;
  height: 45px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid rgb(189, 184, 184);
  text-align: center;
  > span {
    flex: 0 0 40px;
  }
}
.collectionList-main {
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
  .goods-item {
    width: 47%;
    height: auto;
    margin: 2% 0 0 2%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
    .goods-info {
      padding: 5px 6px;
      overflow: hidden;
      background-color: #fff;
      .title {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .footer {
        display: flex;
        justify-content: space-between;
        .price {
          flex: 1;
          color: #ff5777;
        }
      }
    }
  }
}
</style>